<template>
  <view class="content">
    <camera
      v-if="isShowCamera"
      device-position="back"
      flash="off"
      @error="error"
      mode="scanCode"
      style="width: 100%; height: 90vh"
      @scancode="handleScancode"
    ></camera>
    <view v-else>相机组件占位符</view>
    <div class="map">
      <button type="primary" @click="takePhoto">拍照</button>
      <view>预览</view>
      <image mode="widthFix" :src="src"></image>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: "",
      isShowCamera: false,
    };
  },
  onShow() {
    this.innit();
  },
  methods: {
    innit() {
      uni.getSetting({
        success: (res) => {
          console.log("相机权限", res.authSetting["scope.camera"]);
          this.isShowCamera = res.authSetting["scope.camera"];
          // res.authSetting = {
          //   "scope.userInfo": true,
          //   "scope.userLocation": true
          // }
        },
      });
    },
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          this.src = res.tempImagePath;
        },
      });
    },
    error(e) {
      console.log(e.detail);
    },
    handleScancode(e) {
      console.log("扫码识别到", e);
    },
  },
};
</script>

<style>
.map {
  width: 100vw;
  background-color: white;
  position: absolute;
  z-index: 999999;
  top: 100px;
}
</style>
